<template>
  <!-- <showMedia></showMedia> -->
  <div class="videociew" v-if="videociew">
    <div class="videoButton" @click="hitVideo"><el-icon size="50"><CircleClose /></el-icon></div>
    <video id="video" :src="videoUrl" controls="controls" autoplay="autoplay"></video>
  </div>
    <div class="header">Media Files</div>
      <div class="media-panel-wrapper">
        <div style="border-radius: 10px ;background: #fff; ;   box-sizing: border-box; 
padding: 25px;overflow: hidden;height: 100%;box-shadow:1px 0 20px #afafaf ;">
          <el-table class="media-table"  align="center" :header-cell-style="{ color: 'black'}" :data="mediaData.data"  @change="refreshData">
            <el-table-column type="selection" width="30" />
            <el-table-column  fixed  label="文件名" width="150" >
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="点击查看"
                  placement="right"
                >
                  <a style="color: brown;cursor: pointer" @click="LookMedia(scope.row)">{{ scope.row.file_name }}</a> 
                </el-tooltip>
              </template>
              </el-table-column>
              <el-table-column  prop="file_path" label="文件路径" width="150" />
              <el-table-column  prop="drone" label="设备" width="150" />
              <el-table-column  prop="payload" label="相机" width="150" />
              <el-table-column  prop="is_original" label="原图" width="100" />
              <el-table-column  prop="create_time" label="创建时间" width="190" />
              <el-table-column  fixed="right" label="下载" width="90" >
              <template #default="scope">
                <el-button size="small" type="success" @click="downloadMedia(scope.row)">Delete</el-button>
              </template>
          </el-table-column>
        </el-table>
        <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      style=" background: #fff;margin: 0 auto;"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
        </div>
        
      </div>
      

  </template>
  
  <script setup lang="ts">
  import showMedia from '@/components/showMedia/pannelPic.vue'
  import { ref } from '@vue/reactivity'
  import { ElMessage, ElMessageBox } from 'element-plus'
  // import { TableState } from 'ant-design-vue/lib/table/interface'
  import { onMounted, reactive, h } from 'vue'
  import { IPage } from '@/api/http/type'
  import { ELocalStorageKey } from '@/types/enums'
  import { downloadFile } from '@/utils/common'
  import { downloadMediaFile, getMediaFiles, LookMediaFile } from '@/api/media'
  // import { DownloadOutlined } from '@ant-design/icons-vue'
  // import { message, Pagination } from 'ant-design-vue'
  // import { load } from '@amap/amap-jsapi-loader'
  const imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
  const videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];
  const currentPage3 = ref(5)
  const videoUrl =  ref('')
  const pageSize3 = ref(100)
  const small = ref(false)
  const background = ref(false)
  const disabled = ref(false)
  var videociew = ref(false)

  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
  }
  const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
  }
  const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
  const loading = ref(false)
  
  const body: IPage = {
    page: 1,
    total: 0,
    page_size: 50
  }
  interface MediaFile {
  fingerprint: string,
  drone: string,
  payload: string,
  is_original: string,
  file_name: string,
  file_path: string,
  create_time: string,
  file_id: string,
}
  const paginationProp = reactive({
    pageSizeOptions: ['20', '50', '100'],
    showQuickJumper: true,
    showSizeChanger: true,
    pageSize: 50,
    current: 1,
    total: 0
  })
  

  
  const mediaData = reactive({
    data: [] as MediaFile[]
  })
  
  onMounted(() => {
    getFiles()
  })
  
  function getFiles () {
    getMediaFiles(workspaceId, body).then(res => {
      mediaData.data = res.data.list
      paginationProp.total = res.data.pagination.total
      paginationProp.current = res.data.pagination.page
    })
  }
  
  function refreshData (page: Pagination) {
    body.page = page?.current!
    body.page_size = page?.pageSize!
    getFiles()
  }
  
  function downloadMedia (media: MediaFile) {
    
    loading.value = true
    
    downloadMediaFile(workspaceId, media.file_id).then(res => {

      if (!res) {
        return
      }
      const data = new Blob([res])
      downloadFile(data, media.file_name)
    }).finally(() => {
      loading.value = false
    })
  }

  function LookMedia (media: MediaFile) {
    LookMediaFile(workspaceId, media.file_id).then(res => {
      if (!res) {
        return
      }
      let data =  new Blob([res.data])
      res = res.request.responseURL
      const extension = res.split('?')[0].split('.').pop().toLowerCase();      
      if (imageExtensions.includes(extension)) {//image
        // console.log(media);
        
        PicShow(media.file_id,data,res)
      }
    
      // 判断文件扩展名是否在视频扩展名数组中
      if (videoExtensions.includes(extension)) {
        VideoShow(res)
      }
    }).finally(() => {
      loading.value = false
    })
 
}
const VideoShow = (res:string)=>{//展示视频
  videociew.value = true
  videoUrl.value = res

}
const hitVideo = ()=>{//隐藏视频
  videociew.value = false
}
const PicShow = (fileName:string,data:Blob,url:string)=>{//展示图片的气泡框
  ElMessageBox.alert(
    '<img alt="" src="'+url+'" style="" /></div>',
    {
      customClass: 'winClass',//弹窗样式
      dangerouslyUseHTMLString: true,
      showCancelButton: true,
      confirmButtonText: '下载',
      cancelButtonText: '关闭',
      beforeClose: (action, instance, done) => {
      if(action === 'cancel') done()
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = 'Loading...'
        downloadFile(data, fileName)
        instance.confirmButtonLoading = false
        instance.confirmButtonText = '下载'
      }
    },
  }).then((action) => {

  }).catch(()=>{

  
  })
}
    

  </script>
  
  <style lang="scss" scoped>
.videociew{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100;
  overflow: hidden;

  #video{
      height: 100%;
      width: 100%;
      background-color: #000;

    }
  .videoButton{
    border-radius: 50%;
    box-shadow: 1px 0 5px rgb(144, 144, 144);;
    position: absolute;
    color: #fff;
    z-index: 101;
    right: 40px;
    top: 40px;
    cursor: pointer
    
  }
  .videoButton:hover{
    transform: rotate(90deg);
    transition: 0.5s;
  }
}
.media-panel-wrapper {
    height: 92%;
    width: 70%;
    box-sizing: border-box;

    padding: 25px;
    .media-table {
      height: 93%;
      margin-top: 10px;

    }
    .action-area {
      color: $primary;
      cursor: pointer;
    }
  }
  .header {
    width: 100%;
    height: 60px;
    background: #fff;
    box-sizing: border-box;

    padding: 16px;
    font-size: 20px;
    font-weight: bold;
    text-align: start;
    color: #000;
  }
  .viewPic{
    position: absolute;
    height: 100%;
    width: 100%;

  }
 
  </style>
  